<template>
  <div>
    <el-form inline :model="pages">
      <!-- 筛选 -->
      <el-form-item label="有害生物：">
        <el-input v-model="pages.pest" @input="dataChange" />
      </el-form-item>
      <el-form-item label="月份：">
        <el-date-picker
          v-model="pages.start_month"
          type="date"
          placeholder="选择日期"
          style="width: 100%"
        />
      </el-form-item>
      <el-button
        type="primary"
        icon="el-icon-edit"
        @click="addList"
      >添加记录</el-button>
    </el-form>
    <!-- 主体数据 -->
    <el-table :data="userList" stripe style="width: 100%" border height="45vh">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="create_time" label="时间" />
      <el-table-column prop="region" label="行政区划（县）" />
      <el-table-column prop="pest" label="有害生物" />
      <el-table-column prop="in_total" label="发生面积" />
      <el-table-column prop="control" label="预防面积" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-link type="primary" @click="editList(row)">修改</el-link>
          <el-link type="danger">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="pages.page"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="pages.listRows"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 添加逻辑对话框 -->
    <el-dialog
      :title="addFrom.id === 0 ? '添加预防治' : '修改预防治'"
      :visible.sync="dialogVisible"
      width="40%"
      @close="addClose"
    >
      <el-form ref="form" :model="addFrom" label-width="80px">
        <div class="forwBox">
          <div class="box1">
            <el-form-item label="年:">
              <el-input v-model="addFrom.text1" />
            </el-form-item>
            <el-form-item label="行政区划:">
              <el-input v-model="addFrom.region" />
            </el-form-item>
            <el-form-item label="发生面积:">
              <el-input v-model="addFrom.in_total" />
            </el-form-item>
          </div>
          <div class="box2">
            <el-form-item label="月:">
              <el-input v-model="addFrom.text4" />
            </el-form-item>
            <el-form-item label="有害生物:">
              <el-input v-model="addFrom.pest" />
            </el-form-item>
            <el-form-item label="防治面积:">
              <el-input v-model="addFrom.control" />
            </el-form-item>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="determineAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { preventionApis } from '@/api/PreventionAndCure'
export default {
  data() {
    return {
      heigth: (window.innerHeight) * 0.65,
      // 对话开关
      dialogVisible: false,
      // 导航分页处理
      activeName: 'first',
      // 主页数据
      userList: [],
      // 添加数据
      addFrom: {
        id: 0,
        text1: '',
        text2: '',
        text3: '',
        text4: '',
        text5: '',
        text6: ''
      },
      // 筛选数据
      pages: {
        page: 1,
        listRows: 10,
        classify: 1,
        year: 2021
      },
      // 分页请求
      total: null
    }
  },
  created() {
    this.getLit()
  },
  methods: {
    // 主体数据
    async getLit() {
      const res = await preventionApis(this.pages)
      // console.log(res)
      this.userList = res.data
      this.total = res.count
    },
    // 筛选字段
    dataChange() {},
    // 添加
    addList() {
      this.addFrom.id = 0
      this.dialogVisible = true
    },
    // 对话框关闭事件
    addClose() {
      this.addFrom = {}
    },
    // 确定添加事件
    determineAdd() {
      this.dialogVisible = false
    },
    editList(row) {
      this.addFrom.id = 1
      this.dialogVisible = true
      this.addFrom.text1 = row.text1
      this.addFrom.text2 = row.text2
      this.addFrom.region = row.region
      this.addFrom.pest = row.pest
      this.addFrom.in_total = row.in_total
      this.addFrom.control = row.control
    },
    // 分页逻辑s
    handleSizeChange(newSize) {
      this.pages.listRows = newSize
      this.getLit()
    },
    handleCurrentChange(newNum) {
      this.pages.page = newNum
      this.getLit()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-link {
  margin-right: 10px;
}
.el-pagination {
  margin-top: 20px;
}
.forwBox {
  display: flex;
  justify-content: space-between;
  .box1 {
    width: 50%;
  }
  .box2 {
    width: 50%;
  }
  .el-form-item {
    width: 90%;
  }
}
</style>
